<template>
  <div class="relative inline-block">
    <!-- 触发区 -->
    <div class="inline-block cursor-pointer" @mouseenter="handleTriggerEnter" @mouseleave="handleTriggerLeave"
      :style="{ marginLeft: triggerMarginLeft }">
      <slot name="trigger">
        <span class="text-[#165dff] cursor-pointer">下拉菜单</span>
      </slot>
    </div>

    <!-- 下拉菜单 -->
    <div v-if="isDropdownShow"
      class="absolute right-0 top-full mt-2 bg-white rounded-lg shadow-lg border border-gray-100 overflow-hidden z-50 transition-all duration-200 w-auto"
      @mouseenter="handleMenuEnter" @mouseleave="handleMenuLeave" @click.outside="closeDropdown">
      <div v-for="(item, index) in menuItems" :key="index"
        class="flex items-center px-[15px] py-3 text-sm cursor-pointer transition-colors whitespace-nowrap" :class="[
          item.isDanger
            ? 'text-red-600 hover:bg-red-50'
            : 'text-gray-700 hover:bg-gray-50',
          item.disabled ? 'opacity-50 cursor-not-allowed' : ''
        ]" @click="() => handleMenuItemClick(item)" :disabled="item.disabled">
        <IconSvg v-if="item.icon" :name="item.icon"
          class="h-[16px] w-[16px] mr-2 inline-flex items-center justify-center"
          :class="item.isDanger ? 'text-red-600' : 'text-gray-500'" />
        <span>{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted, defineProps, defineEmits } from 'vue';
import IconSvg from './IconSvg.vue';

const props = defineProps({
  menuItems: {
    type: Array,
    required: true,
    default: () => [{ label: '', actionKey: '' }]
  },
  triggerMarginLeft: {
    type: String,
    default: '0px'
  },
  showDelay: {
    type: Number,
    default: 100
  },
  hideDelay: {
    type: Number,
    default: 200
  }
});

const emit = defineEmits(['menu-click', 'dropdown-change']);

const isDropdownShow = ref(false);
let showTimer = null;
let hideTimer = null;

const handleTriggerEnter = () => {
  clearHideTimer();
  showTimer = window.setTimeout(() => {
    isDropdownShow.value = true;
    emit('dropdown-change', true);
  }, props.showDelay);
};

const handleTriggerLeave = () => {
  clearShowTimer();
  hideTimer = window.setTimeout(() => {
    if (!isDropdownShow.value) return;
    isDropdownShow.value = false;
    emit('dropdown-change', false);
  }, props.hideDelay);
};

const handleMenuEnter = () => clearHideTimer();
const handleMenuLeave = () => {
  hideTimer = window.setTimeout(() => {
    isDropdownShow.value = false;
    emit('dropdown-change', false);
  }, props.hideDelay);
};

const handleMenuItemClick = (item) => {
  if (item.disabled) return;
  emit('menu-click', item.actionKey, item);
  closeDropdown();
};

const closeDropdown = () => {
  clearShowTimer();
  clearHideTimer();
  isDropdownShow.value = false;
  emit('dropdown-change', false);
};

const clearShowTimer = () => {
  if (showTimer) {
    window.clearTimeout(showTimer);
    showTimer = null;
  }
};

const clearHideTimer = () => {
  if (hideTimer) {
    window.clearTimeout(hideTimer);
    hideTimer = null;
  }
};

onUnmounted(() => {
  clearShowTimer();
  clearHideTimer();
});

// 修正：移除defineSlots的参数，在JavaScript中不需要
defineSlots();
</script>
